<template>
	<view class="system-container" v-if="detailData.notice.length > 0">
		<view v-for="(item, i) in detailData.notice" :key="i" class="s-card">
			<view class="s-c-header">
				<view class="s-c-title">系统通知</view>
				<view class="s-c-time">{{item.created_at}}</view>
			</view>
			<view class="s-c-content">
				<view class="s-c-tit">{{item.title}}</view>
				<view class="s-c-detail">{{item.description}}</view>	
			</view>
		</view>
	</view>
	
	<view v-else>
		<defalut-graph></defalut-graph>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue"
	import { onReachBottom } from '@dcloudio/uni-app'
	import {getMessageList} from '@/api_request/api';
	import { useInfoStore } from '@/store/userInfo';
	import { storeToRefs } from 'pinia';
	
	const userStore = useInfoStore()
	const {userInfo} = storeToRefs(userStore)
	
	const detailData = reactive({
		notice: [],
		page_num: 1,
		page_size: 10,
		isLoading: false
	})
	
	onReachBottom(() => {
		if(detailData.isLoading) return
		detailData.page_num+=1
		getNoticeList()
	})
	
	const getNoticeList = async () => {
		detailData.isLoading = true;
		const params = {
			page_num: detailData.page_num,
			page_size: detailData.page_size,
			community_id: userInfo.value.community_id
		}
		const {data, code, message} = await getMessageList(params)
		detailData.isLoading = false;
		if(code == 200) {	
			detailData.notice = [...detailData.notice, ...data.list];
		}else {
			uni.$showMsg(message)
		}
	}
	getNoticeList()
</script>

<style lang="scss" scoped>
	.system-container {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background: #F6F8FC;
		width: 100%;
		min-height: 100%;
		
		.s-card {
			background: #FFFFFF;
			border-radius: 10rpx;
			
			.s-c-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #F4F4F4;
				
				.s-c-title {
					font-size: 28rpx;
					padding: 6rpx 10rpx;
					box-sizing: border-box;
					font-weight: 700;
					color: $cus-color-6;
					background: rgba(74,118,247,0.2);
					border-radius: 6rpx 0rpx;
				}
				
				.s-c-time {
					font-size: 24rpx;
					color: $cus-color-1;
				}
			}
			
			.s-c-content {
				padding: 26rpx 20rpx 34rpx 20rpx;
				box-sizing: border-box; 
				
				.s-c-tit {
					font-size: 32rpx;
					font-weight: 500;
					color: $cus-color-7;
					line-height: 48rpx;
				}
				
				.s-c-detail {
					margin-top: 8rpx;
					font-size: 24rpx;
					color: $cus-color-1;
					line-height: 40rpx;
				}
			}
		}
	}
</style>